<template>
  <div class="default">
    <div style="margin-bottom: 20px;">
      <!-- <el-input @keyup.enter.native="getData" style="width: 300px;" size='small' placeholder="请输入下单账号" clearable
          v-model="params.name">
          <template slot="prepend">下单账号</template>
</el-input> -->
      <el-input @keyup.enter.native="searchGetData" style="width: 300px;margin: 0 20px;" size='small'
                placeholder="请输入店铺名称" clearable v-model="params.storeName">
        <template slot="prepend">店名</template>
      </el-input>
      <el-select @change="getData" v-model="params.warehouseId" size='small' placeholder="请选择仓库">
        <el-option v-for="item in warehouseList" :key="item.warehouseId" :label="item.wareHouseName"
                   :value="item.warehouseId">
        </el-option>
      </el-select>
    </div>
    <el-table element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" class="table"
              :height="maxHeight + 'px'" v-loading='loading' border :data="list" tooltip-effect="dark"
              style="width: 100%"
              :headerCellStyle="{
                    'textAlign': 'center',
                    'background': '#ff6a00',
                    'color': 'white',
                    'fontWeight': 400,

                }" :cellStyle="{
                    'textAlign': 'center',
                    'fontSize': '12px'
                }">
      <el-table-column prop="saleId" label="下单ID" min-width="120px"></el-table-column>
      <el-table-column prop="creatorName" label="下单人" min-width="120px"></el-table-column>
      <el-table-column prop="createdAt" label='下单时间' min-width="180px"></el-table-column>
      <el-table-column prop="storeName" label="门店名称" min-width="140px"></el-table-column>
      <el-table-column label="类型" min-width="140px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.saleType==1" type="success">报货</el-tag>
          <el-tag v-if="scope.row.saleType==2">补货</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="storeContacts" label="联系人" min-width="120px"></el-table-column>
      <el-table-column prop="storeAddress" label="地址" min-width="140px"></el-table-column>
      <el-table-column prop='remark' label="备注" min-width="140px"></el-table-column>
      <el-table-column prop="totalAmount" label="总价"
                       v-if="!['admin','王伯维','沈旭滨','王健','袁文典'].includes(userName) <= 0"
                       min-width="140px"></el-table-column>
      <el-table-column prop="disPrice" label="折后价"
                       v-if="!['admin','王伯维','沈旭滨','王健','袁文典'].includes(userName) <= 0"
                       min-width="120px"></el-table-column>
      <el-table-column prop="subAmount" label="差价"
                       v-if="!['admin','王伯维','沈旭滨','王健','袁文典'].includes(userName) <= 0"
                       min-width="120px"></el-table-column>
      <el-table-column prop="warehouse.warehouseName" label="发货仓库" min-width="140px"></el-table-column>
      <el-table-column prop="mobile" label="电话" min-width="140px"></el-table-column>
      <el-table-column prop='location' label="距离"></el-table-column>
      <!-- <el-table-column label="明细" min-width="300px">
          <template slot-scope="scope">
              <el-table style="width: 100%" border :data="scope.row.materialList" :headerCellStyle="{
          'textAlign': 'center',
          'fontSize': '12px',
          'fontWeight': 400,

      }" :cellStyle="{
          'textAlign': 'center',
          'fontSize': '12px'
      }">
                  <el-table-column prop="name" label="名称"></el-table-column>
                  <el-table-column prop="salePrice" label="单价"></el-table-column>
                  <el-table-column prop="buyCount" label="数量"></el-table-column>
              </el-table>
          </template>
      </el-table-column>
      <el-table-column prop='totalAmount' label="总价" min-width="140px"></el-table-column>
      <el-table-column label="状态">
          <template slot-scope="scope">
             <el-tag v-if="scope.row.outStatus== 0" type="danger">未提交 </el-tag>
             <el-tag v-if="scope.row.outStatus== 1" type="success">已提交 </el-tag>

          </template>
      </el-table-column> -->
      <el-table-column label="操作" min-width="140px" fixed="right">
        <template slot-scope="scope">
          <div style="display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 10px;">
            <div v-if="['admin','王伯维','沈旭滨','王健','袁文典'].includes(userName) && scope.row.outStatus === 0">
              <el-link type="danger" @click="deleteOrder(scope.row)">删除</el-link>
            </div>
            <div v-if="scope.row.outStatus == 0">
              <el-link type="primary" @click="outbound(scope.row)">提交</el-link>
            </div>
            <div v-if="checkAccountList.includes(userName)">
              <el-link @click="previewMaterial(scope.row)">查看</el-link>
            </div>
            <div v-if="checkAccountList.includes(userName)">
              <el-link type="info" @click="saveXlsx(scope.row)">导出</el-link>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style='margin-top:20px' align="right" @size-change="handleCheckSizeChange"
                   @current-change="handleCheckCurrentChange" :current-page="params.currentPage"
                   :page-sizes="[20, 30, 40, 50]"
                   layout="total, sizes, prev, pager, next, jumper" :total="params.count">
    </el-pagination>
    <el-dialog title="小程序下单出库" width="1000px" :visible.sync="dialogTableVisible">
      <el-descriptions title="用户下单信息">
        <el-descriptions-item label="门店名称">{{
            info.storeName
          }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人员">{{
            info.storeContacts
          }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ info.mobile }}</el-descriptions-item>
        <el-descriptions-item label="门店地址">
          {{ info.storeAddress }}
        </el-descriptions-item>
        <el-descriptions-item label="发货仓库">
          <el-tag type='plain' style="color:#ff6a00;border-color: #ff6a00;">{{
              info.warehouse.warehouseName
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="用户留言">
          <el-input :disabled="userName != 'CZCYWY'" v-model="info.remark" @change="setRemark"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="材料总价" v-if="checkAccountList.includes(userName)">{{
            info.totalAmount
          }}元
        </el-descriptions-item>
        <el-descriptions-item label="折扣金额" v-if="checkAccountList.includes(userName)">{{
            info.paymentAmount
          }}元
        </el-descriptions-item>
        <el-descriptions-item label="实付金额" v-if="checkAccountList.includes(userName)">
          <el-link type="danger">
            {{ info.discountAmount }}元
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item label="回款金额" v-if="checkAccountList.includes(userName)">
          <el-input-number size="mini" v-model="info.receivedAmount"></el-input-number>
        </el-descriptions-item>
        <el-descriptions-item label="回款凭证" v-if="checkAccountList.includes(userName)">
          <el-image :src="v" ref="preview" v-for="(v, i) in  prePaymentVoucher" :key="i"
                    :preview-src-list="prePaymentVoucher" style="width: 50px;height: 50px;" />
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="info.materialList" maxHeight="400px" border :headerCellStyle="{
                    'textAlign': 'center',
                    'background': '#ff6a00',
                    'color': 'white',
                    'fontWeight': 400,
                }" :cellStyle="{
                    'textAlign': 'center',
                    'fontSize': '12px'
                }">
        <el-table-column prop="name" label="分类名称" min-width="180px"></el-table-column>
        <el-table-column label="选择材料" min-width="400px">
          <template slot-scope="scope">
            <el-tag type="danger" style='width: 100%;'
                    v-if="scope.row.materials.length == 0">当前材料,暂无库存
            </el-tag>
            <el-select v-else style="width:100%" :disabled="scope.row.materials.length == 1" clearable
                       @change="select" v-model="scope.row.selectMaterialId" filterable placeholder="请选择">
              <el-option v-for="item in scope.row.materials" :key="item.materialId"
                         :label="`名称:${item.name} - 编码:${item.materialId} - 库存:${item.count} - 价格:${item.material.salePrice} -  色号:${item.material.color}`"
                         :value="item.materialId">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="buyCount" label="数量" min-width="80px"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitOrder">确 定</el-button>
            </span>
    </el-dialog>
    <el-dialog :visible.sync="preViewStatus" title="订单信息" width="90%">
      <div>
        <el-descriptions :column="4">
          <el-descriptions-item label="店名">{{ preViewInfo.storeName }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ preViewInfo.storeContacts }}</el-descriptions-item>
          <el-descriptions-item label="电话">{{ preViewInfo.mobile }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ preViewInfo.storeAddress }}</el-descriptions-item>
          <el-descriptions-item label="实付">
            <el-link type="danger">{{ preViewInfo.disPrice }}</el-link>
          </el-descriptions-item>
          <el-descriptions-item label="补贴">
            <el-link type="success">{{ preViewInfo.subAmount }}</el-link>
          </el-descriptions-item>
          <el-descriptions-item label="总价">{{ preViewInfo.totalAmount }}</el-descriptions-item>
          <el-descriptions-item label="仓库">{{ preViewInfo.warehouse.warehouseName }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div style=" line-height: 24px;
    font-size: 18px;
    color: #303133;margin:20px 0;">材料信息
      </div>
      <div style="display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20px 10px;">
        <div v-for="(v, i) in preViewInfo.materialList" :key="i" class="previewItem">
          <div class="previewTitle">
            名称:{{ v.name }}
          </div>
          <div class="previewNode">
            <div style="width: 30px;">数量:</div>
            <div style="color:red;min-width: 50px;text-align: center;">{{ v.buyCount }}</div>
          </div>
          <div class="previewNode">
            <div style="width: 30px;">单价:</div>
            <div style="color:red;min-width: 50px;text-align: center;">{{ v.salePrice }}</div>
          </div>

        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { calculateDistance } from '@/utils/public.js'
import quinn from "@/utils/quinn";
import axios from 'axios';
import Decimal from 'decimal.js';
import * as XLSX from 'xlsx-js-style';

export default {
  name: "UserOrder",
  meta: { title: "小程序订单", icon: "el-icon-mobile", sort: 5, authority: 107 },
  data() {
    return {
      preViewStatus: false,
      warehouseList: [
        {'warehouseId':13,'wareHouseName':"广西贵港仓"},
        {'warehouseId':14,'wareHouseName':"山西运城仓"},
        {'warehouseId':15,'wareHouseName':"江西吉安仓"},
        {'warehouseId':16,'wareHouseName':"河北霸州仓"},
        {'warehouseId':17,'wareHouseName':"广东佛山仓"},
        {'warehouseId':18,'wareHouseName':"江苏常熟仓"},
      ],
      accountList: '',
      dialogTableVisible: false,
      checkAccountList: ['admin','王伯维','沈旭滨','王健','袁文典'],
      params: {
        name: '',
        pageNumber: 1,
        pageSize: 20,
        currentPage: 1,
        count: 0,
        warehouseId: '',
        storeName: '',
      },
      maxHeight: 0,
      loading: false,
      userName: '',
      list: [],
      host: this.$imgHost,
      info: {
        createdA: '',
        lat: '',
        lon: '',
        mobile: '',
        remark: '',
        storeAddress: '',
        storeContacts: '',
        storeName: '',
        totalAmount: '', //总价
        receivedAmount: '',//回款
        materialList: '',
        saleId: '',
        paymentVoucher: '',
        creator: '',
        discountAmount: 0,
        paymentAmount: 0,
        warehouse: {
          warehouseName: '',
          warehouseId: ''
        }
      },
      invocherList: [],
      prePaymentVoucher: [],
      preViewInfo: {
        warehouse: {
          warehouseName: ''
        }
      }
    }
  },

  activated() {

    //所有组件被keep-alive缓存 此方法内逻辑 每次进入后直接调用
    //或者去router/routerExtend.js内取消当前页面进入 store.state.cacheRouter 不被缓存
    const { userName = [] } =
    quinn.getStorage("userDatav3") || store.state.userData || {};
    this.userName = userName;
    this.getWarehouseList()
    // const { userName = [] } =
    //     quinn.getStorage("userDatav3") || store.state.userData || {};
    this.userName = userName;
    this.$nextTick(() => {
      this.maxHeight = window.innerHeight - 240;
    })
    window.onresize = () => {
      this.$nextTick(() => {
        this.maxHeight = window.innerHeight - 240;
      })
    }
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    getWarehouseList() {
      this.params.warehouseId = this.warehouseList[0].warehouseId;

      this.$api.userUserList({ pageNumber: 1, pageSize: 10000 }).then(res => {
        this.accountList = res.rows;
        this.getData();
      })

      // this.$api.warehouseWarehouseList({pageNumber:1,pageSize:100000}).then(res=>{
      //     this.warehouseList = res.rows;
      // })
    },
    handlePaste(event) {
      if (!this.dialogTableVisible) return;
      const clipboardData = event.clipboardData || window.clipboardData;
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i];

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile();
            if (file) {
              this.uploadImage(file);
            }
          } else {
            this.$message.error('请拷贝图片!');
            break;
          }
        }
      }
    },
    previewMaterial(info) {
      this.preViewInfo = info;
      this.preViewStatus = true;
    },
    setRemark() {

      let data = JSON.parse(this.info.remarkInfo)
      data.remark = this.info.remark;
      this.info.remarkInfo = JSON.stringify(data);
      console.log(this.info)
    },
    uploadImage(imageFile) {
      const formData = new FormData();
      formData.append('file', imageFile);
      axios.post(`${this.$apiHost}/common/upload`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'token': window.$quinn.getStorage("tokenv3")
        }
      })
        .then(response => {
          this.invocherList.push(response.data.data[0]);
          this.prePaymentVoucher.push(this.host + response.data.data[0]);
          this.info.paymentVoucher = this.invocherList.join(',');
        })
        .catch(error => {
          console.error('Upload failed:', error);
        });
    },
    select() {
    },
    handleCheckSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    handleCheckCurrentChange(e) {
      this.params.pageNumber = e;
      this.getData();
    },
    searchGetData() {
      this.params.pageNumber = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      let params = {
        pageNumber: this.params.pageNumber,
        pageSize: this.params.pageSize,
        //  userName: this.userName == 'admin' ?'':this.userName,
        warehouseId: this.params.warehouseId,
        storeName: this.params.storeName
      }
      this.$api.saleWeChatSaleList(params).then(res => {

        this.params.count = res.count;
        res.rows.map(el => {
          // 判断下单人
          for (let i in this.accountList) {
            if (this.accountList[i].userId === el.creator) {
              el.creatorName = this.accountList[i].userName;
            }
          }
          //计算收货地址到零食很忙总部距离
          el.location = calculateDistance(28.170048, 113.043198, el.lat, el.lon).toFixed(1) + '千米';
          //判断下单时候备注是否有折扣价格
          const regex = /^\s*(\{.*\}|\[.*\])\s*$/;
          if (regex.test(el.remark)) {
            const data = JSON.parse(el.remark);
            el.remark = data.remark;
          }
          // el.remarkInfo = el.remark;
          // const regex = /^\s*(\{.*\}|\[.*\])\s*$/;
          // if (regex.test(el.remark)) {
          //     const data = JSON.parse(el.remark);
          //     el.remark = data.remark;
          //     el.totalDisCount = data.totalDisCount;
          //     el.totalDiffPrice = data.totalDiffPrice;
          //     let mobile = JSON.parse(el.remarkInfo)
          //     mobile.mobile = el.mobile;
          //     el.remarkInfo = JSON.stringify(mobile)
          // } else {
          //     el.totalDisCount = 0;
          //     el.totalDiffPrice = 0;
          // }
          el.materialList.map(k => {
            k.selectMaterialId = '';
          })
        })
        this.list = res.rows;
        this.loading = false;
      })
    },
    deleteOrder(info) {
      this.$alert(`删除ID为:${info.saleId}报货单`, '提示', {
        confirmButtonText: '确定',
        callback: (res) => {
          if (res === 'confirm') {
            this.$api.saleWeChatSaleDelete({ 'saleId': info.saleId }).then(res => {
              this.getData();
            })
          }
        }
      });
    },
    async outbound(info) {
      if (info.outStatus == 1) {
        this.$message.error('请勿重复提交!');
        return;
      }
      this.info.createdAt = info.createdAt;
      this.info.lat = info.lat;
      this.info.lon = info.lon;
      this.info.mobile = info.mobile;
      this.info.remark = info.remark;
      // this.info.remarkInfo = info.remarkInfo;
      this.info.storeAddress = info.storeAddress;
      this.info.storeContacts = info.storeContacts;
      this.info.storeName = info.storeName;
      this.info.totalAmount = info.totalAmount;
      this.info.warehouse = info.warehouse;
      this.info.saleId = info.saleId;
      this.info.creator = info.creator;
      this.info.outStatus = info.outStatus;
      this.info.saleTime = info.createdAt;
      // this.info.paymentAmount = Math.ceil( Decimal(this.info.totalAmount).mul(Decimal(0.91))); //实付
      this.info.paymentAmount = info.subAmount;
      // this.info.discountAmount=Decimal(this.info.totalAmount).sub(Decimal(this.info.paymentAmount)); //折扣
      this.info.discountAmount = info.disPrice;
      this.info.saleType= info.saleType;
      let arr = []
      info.materialList.map(el => {
        this.$api.inventoryInventoryList({
          pageSize: 100000,
          pageNumber: 1,
          warehouseId: info.warehouse.warehouseId,
          materialName: el.name,
          saleTime: info.createdAt,
          saleType: info.saleType
        }).then(res => {
          let inventoryEnoughres = res.rows.filter(el => el.count !== 0); //去掉当前仓库库存为0的材料
          inventoryEnoughres.sort((a, b) => b.count - a.count); //按照库存进行降序
          arr.push({
            name: el.name,
            buyCount: el.buyCount,
            materials: inventoryEnoughres,
            selectMaterialId: inventoryEnoughres.length === 1 ? inventoryEnoughres[0].materialId : ''
          })
        })
      })
      await this.setMaterial(arr);
    },
    setMaterial(arr) {
      this.info.materialList = arr;
      this.dialogTableVisible = true;
    },
    saveXlsx(info) {
      const wb = XLSX.utils.book_new();
      let data = [
        [info.storeName+'   '+info.createdAt],
        [`仓库:${info.warehouse.warehouseName}`, '', `实付:${info.disPrice}`, ''],
        [`补贴:${info.subAmount}`, '', `总价:${info.totalAmount}`, ''],
        [`联系人:${info.storeContacts}${info.mobile}`, '', `地址:${info.storeAddress}`, ''],
        ['商品名称', '数量', '价格', '小计']]
       info.materialList.map(el => {
        el.salePriceTotal = new Decimal(el.buyCount).mul(Decimal(el.salePrice)).toNumber();
        data.push([el.name, el.buyCount, el.salePrice, el.salePriceTotal])
      })
      // data[data.length + 1] = [info.storeName,`实付:${info.totalDisCount}`,`补贴:${info.totalDiffPrice}`,`总价:${info.totalAmount}`];
      const ws = XLSX.utils.aoa_to_sheet(data);
      ws['!cols'] = [
        { wpx: 200 }, // 第一列宽度为250单位
        { wpx: 100 }, // 第二列宽度为300单位
        { wpx: 100 },  // 第三列宽度为350单位
        { wpx: 100 },
        { wpx: 100 },
        { wpx: 100 }
      ];
      ws["A1"].s = {
        alignment: { horizontal: 'center' },
        font: { blod: true, color: { rgb: '000000' } },
        fill: { fgColor: { rgb: 'ff6a00' } }
      }
      ws["A1"].hpt = 140;
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

      // 导出工作簿为 Blob 对象
      ws['!merges'] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }, { s: { r: 1, c: 0 }, e: { r: 1, c: 1 } }, {
        s: {
          r: 1,
          c: 2
        }, e: { r: 1, c: 3 }
      }, { s: { r: 2, c: 0 }, e: { r: 2, c: 1 } }, { s: { r: 2, c: 2 }, e: { r: 2, c: 3 } }, {
        s: { r: 3, c: 0 },
        e: { r: 3, c: 1 }
      }, { s: { r: 3, c: 2 }, e: { r: 3, c: 3 } }]
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

      // 创建一个 Blob 对象
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });

      // 使用 Blob 对象创建一个链接
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `${info.storeName}${new Date().getTime()}.xlsx`;

      // 触发下载
      link.click();

      // 清理
      URL.revokeObjectURL(link.href);

      function s2ab(s) {
        const buf = new ArrayBuffer(s.length);
        const view = new Uint8Array(buf);
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
      }
    },
    submitOrder() {
      let mateData = [];
      for (let i in this.info.materialList) {
        if (this.info.materialList[i].selectMaterialId == '') {
          this.$message.error('请检查库存,再提交!');
          return;
        } else {
          mateData = mateData.concat([{
            'id': this.info.materialList[i].selectMaterialId,
            'count': this.info.materialList[i].buyCount
          }])
        }
      }
      if (this.info.paymentVoucher == '') {
        this.$message.error('请上传回款凭证!');
        return;
      }
      if (this.info.receivedAmount <= 0) {
        this.$message.error('请输入回款金额!');
        return;
      }
      let params = {
        materialList: mateData,
        remark: this.info.remark,
        storeContacts: this.info.storeContacts,
        storeAddress: this.info.storeAddress,
        saleTime: this.info.createdAt,
        warehouseId: this.info.warehouse.warehouseId,
        paymentAmount: this.info.totalAmount,
        paymentVouchers: this.info.paymentVoucher,
        receivedAmount: this.info.receivedAmount, //回款金额
        storeName: this.info.storeName,
        wechatSaleId: this.info.saleId,
        creator: this.info.creator,
        mobile: this.info.mobile,
        saleType: this.info.saleType
      }
      this.$api.saleSaleAdd(params).then(res => {
        let params = {
          wechatSaleId: this.info.saleId
        }
        this.$api.saleWechatSaleStatusUpdate(params).then(res => {
          this.dialogTableVisible = false;
          this.invocherList = [];
          this.prePaymentVoucher = [];
          this.info.paymentVoucher = [];
          this.info.receivedAmount=0;
          this.getData();
        })
      })
    }

  }
}
</script>
<style lang="less" scoped>
.default /deep/ .el-button {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

.default /deep/ .el-button:hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}

/deep/ .el-button:hover {
  color: black;
  border-color: #DCDFE6;
  background-color: white;
}

span /deep/ .el-button:nth-child(2) {
  border-color: #ff6a00;
  background-color: #ff6a00;
}

span /deep/ .el-button:nth-child(2):hover {
  color: white;
  border-color: #f59a59;
  background-color: #f59a59;
}

.createInfo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px
}

.createInfo > div > div:nth-child(1) {
  margin-bottom: 10px;
}

/deep/ .el-input__inner:hover {
  border-color: #ff6a00 !important;
}

/deep/ .el-input__inner:focus {
  border-color: #ff6a00 !important;
}

/deep/ .selected {
  color: #ff6a00 !important;
}

/deep/ .active {
  color: #ff6a00 !important;
}

/deep/ .selected {
  color: #ff6a00 !important;
}

/deep/ .el-loading-text {
  color: #ff6a00 !important;
}

/deep/ .el-icon-loading {
  color: #ff6a00 !important;
}

.previewTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: break-all;
  width: calc(100% - 230px);
}

.previewNode {
  width: 80px;
  display: flex
}

.previewItem {
  display: flex;
  width: 100%;
  font-size: 12px;
  justify-content: space-between;
}
</style>
